<template>
    <div>
        <BookInfo :info='info'></BookInfo>
        <CommentList :comments="comments"></CommentList>
        <div v-if="showAdd" class="comment">
            <textarea v-model="comment"
                      class="textarea"
                      maxlength='100'
                      placeholder="请输入图书短评"
            ></textarea>
            <div class="location">
                地理位置:
                <switch @change="getGeo" :checked="location" color='#ea5a49'/>
                <span class="text-primary">{{ location }}</span>
            </div>
            <div class="phone">
                手机型号:
                <switch @change="getPhone" :checked="phone" color='#ea5a49'/>
                <span class="text-primary">{{ phone }}</span>
            </div>
            <button class="btn" @click="addComment">评论</button>
        </div>
        <div v-else class="text-footer">未登录或者已经评论过啦</div>
        <button class="btn" open-type='share'>转发给好友</button>
    </div>
</template>

<script type="text/ecmascript-6">
import { get, post, showModal } from '@/util'
import BookInfo from '@/components/BookInfo'
import CommentList from '@/components/CommentList'

export default {
  data () {
    return {
      userinfo: {},
      bookid: '',
      info: {},
      comment: '',
      location: '',
      phone: '',
      comments: []
    }
  },
  components: {
    BookInfo,
    CommentList
  },
  computed: {
    // 是否显示评论
    showAdd () {
      // 没登陆
      if (!this.userinfo.openId) return false

      // 评论页面有自己的评论 （只能评论一次）
      if (this.comments.filter(v => v.openid === this.userinfo.openId).length) { return false }

      return true
    }
  },
  mounted () {
    // 获取传入的图书id
    this.bookid = this.$root.$mp.query.id

    // 获取userinfo
    const userinfo = wx.getStorageSync('userinfo')
    if (userinfo) this.userinfo = userinfo

    // 获取图书信息
    this.getDetail()

    // 获取评论
    this.getComments()
  },
  methods: {
    // 获取图书信息
    async getDetail () {
      const info = await get('/weapp/bookdetail', { id: this.bookid })
      wx.setNavigationBarTitle({
        title: info.title
      })
      this.info = info
    },

    // 获取地理位置
    getGeo (e) {
      // 百度 服务密钥
      // EUEROgXLWwr0mhFt4qqV872HawXIWgR7
      // http://api.map.baidu.com/geocoder/v2

      const ak = 'EUEROgXLWwr0mhFt4qqV872HawXIWgR7'
      let url = 'http://api.map.baidu.com/geocoder/v2/'

      if (e.target.value) {
        wx.getLocation({
          success: geo => {
            wx.request({
              url,
              data: {
                ak,
                location: `${geo.latitude},${geo.longitude}`,
                output: 'json'
              },
              success: res => {
                if (res.data.status === 0) {
                  this.location = res.data.result.addressComponent.city
                } else {
                  this.location = '位置地点'
                }
              }
            })
          }
        })
      } else {
        // 没选中按钮
        this.location = ''
      }
    },

    // 获取手机型号
    getPhone (e) {
      if (e.target.value) {
        const phoneInfo = wx.getSystemInfoSync()
        this.phone = phoneInfo.model
      } else {
        // 没选中按钮
        this.phone = ''
      }
    },

    // 提交评论
    async addComment () {
      if (!this.comment) return
      // 提交的数据
      let data = {
        openid: this.userinfo.openId,
        bookid: this.bookid,
        comment: this.comment,
        phone: this.phone,
        location: this.location
      }

      try {
        await post('/weapp/addcomment', data)
        this.comment = ''

        // 提交后显示评论
        this.getComments()
      } catch (error) {
        showModal('失败', error.msg)
      }
    },

    // 获取评论
    async getComments () {
      const comments = await get('/weapp/commentlist', { bookid: this.bookid })
      this.comments = comments.list || []
    }
  },
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
  }
}
</script>

<style scoped lang="scss">
.comment {
  margin-top: 20rpx;
  .textarea {
    width: 730rpx;
    height: 200rpx;
    background-color: #eeeeee;
    padding: 10rpx;
  }
  .location {
    margin-top: 10px;
  }
  .phone {
    margin-top: 10px;
  }
}
</style>
